<script setup lang="ts">
const gameBaseInfo = {
  code: 'crash',
  name: 'Crash',
  ename: 'Crash',
  online_user_num: 0,
  online_guest_num: 0,
  like_count: 0,
  is_like: 0,
  image_cover: 'game/cover/crash.png',
  image_cover_text: 'Original',
  image_icon: 'game/icon/crash.png',
  min_bet_amount: '0.0001',
  max_bet_amount: '800000',
  max_bet_payout: '40000',
  default_bet_amount: '1',
  is_top: 0,
  is_hot: 1,
  status: 1,
  provider_id: 1,
  provider_game_id: 0,
  game_type_detail: {
    type_id: 1,
    name: 'Originals',
    alias: 'originals',
    coefficient: 0.01,
    game_count: 16,
  },
  game_provider_detail: {
    provider_code: 'g9',
    name: 'G9 Game',
    alias: 'G9 GAME',
    allow_currency: '',
  },
};
</script>

<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4>游戏封面</h4>

    <p class="mt-4 text-sm text-gray">
      通过 class 设置封面的宽度，高度自动计算，保持比例
    </p>

    <div class="mt-4 flex items-start gap-4">
      <TGameCover class="w-30" :detail="{ ...gameBaseInfo, image_cover: '/error-test.png' }" />
      <TGameCover class="w-30" :detail="{ ...gameBaseInfo, image_cover: '' }" />
      <TGameCover class="w-40" :detail="{ ...gameBaseInfo, is_top: 1, status: 2 }" />
      <TGameCover class="w-30" :detail="{ ...gameBaseInfo, is_top: 1 }" />
      <TGameCover class="w-20" :detail="gameBaseInfo" />
    </div>
  </div>
</template>
